
#content{
	text-align: center!important;
	background:url(images/background.png)no-repeat bottom #cdcdcd;
	background-attachment: relative;
	-webkit-background-size: auto, cover;
 	-moz-background-size: auto, cover;
 	-o-background-size: auto, cover;
 	-ms-background-size: auto, cover;
 	background-size: auto, cover;
 	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
}
#wrapper{
	position: relative;
	width: 300px;
	margin: 0px auto;
}
#login, #register{
	margin-top: 60px;
	width: 100%;
	height: 610px;
}
#frmregister,
#frmlogin{
	margin-top: 0px;
	position: absolute;
	background: linear-gradient(#27ae61,#38BD72);
}
#login{
	margin-top: 150px;
}
#register{
	margin-top: -745px;
	margin-bottom: 20px;
	width: 310px;
}
#frmlogin{
	width: 310px;
}

#register{
	z-index: 21;
	opacity: 0;
	display: none;
}
#login{
	z-index: 22;
}
#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login
{
	display: block;
	z-index: 22;
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-delay: .4s;
	-moz-animation-delay: .4s;
	-o-animation-delay: .4s;
	-ms-animation-delay: .4s;
	animation-delay: .4s;
}
#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
	-webkit-animation-name: fadeOutLeft;
	-moz-animation-name: fadeOutLeft;
	-o-animation-name: fadeOutLeft;
	-ms-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft;
}
.animate{
	-webkit-animation-duration: 1.2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	
	-moz-animation-duration: 1.2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	
	-o-animation-duration: 1.2s;
	-o-animation-timing-function: ease;
	-o-animation-fill-mode: both;
	
	-ms-animation-duration: 1.2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}
#frmregister div,
#frmlogin div{
	border: solid 1px rgba(0,0,0,0.2);
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.2), 0 14px 8px -6px rgba(0,0,0,0.9);
	padding: 15 px;
	padding-bottom: 0px;
}
#frmregister h1,
#frmlogin h1{
	font-family: 'opensans_extrabold';
	font-weight: normal;
	font-size: 28px;
	background: -webkit-repeating-linear-gradient(-45deg, 
 	rgb(107, 107, 106), 
 	rgb(42, 44, 43) 20px, 
 	rgb(37, 18, 44) 20px, 
 	rgba(14, 18, 64,0.38) 40px, 
 	rgb(27, 28, 28) 40px);
 	-webkit-text-fill-color: transparent;
 	-webkit-background-clip: text;
 	-moz-text-fill-color: transparent;
 	-moz-background-clip: text;
 	-o-text-fill-color: transparent;
 	-o-background-clip: text;
 	-ms-text-fill-color: transparent;
 	-ms-background-clip: text;
 	letter-spacing: -2px;
 	text-transform: uppercase;
}
#frmregister h1:after,
#frmlogin h1:after{
	content: ' ';
	display: block;
	margin-left: 10%;
	width: 80%;
	height: 1px;
	margin-top: 1px;
	background: -moz-linear-gradient(left, rgba(30,30,30,0) 0%, rgba(30,30,30,0.3) 20%, rgba(30,30,30,0.6) 53%, rgba(30,30,30,0.3) 79%, rgba(30,30,30,0) 100%); 
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,30,30,0)), color-stop(20%,rgba(30,30,30,0.3)), color-stop(53%,rgba(30,30,30,0.6)), color-stop(79%,rgba(30,30,30,0.3)), color-stop(100%,rgba(30,30,30,0))); 
	background: -webkit-linear-gradient(left, rgba(30,30,30,0) 0%,rgba(30,30,30,0.3) 20%,rgba(30,30,30,0.6) 53%,rgba(30,30,30,0.3) 79%,rgba(30,30,30,0) 100%);  
	background: -o-linear-gradient(left, rgba(30,30,30,0) 0%,rgba(30,30,30,0.3) 20%,rgba(30,30,30,0.6) 53%,rgba(30,30,30,0.3) 79%,rgba(30,30,30,0) 100%); 
	background: -ms-linear-gradient(left, rgba(30,30,30,0) 0%,rgba(30,30,30,0.3) 20%,rgba(30,30,30,0.6) 53%,rgba(30,30,30,0.3) 79%,rgba(30,30,30,0) 100%); 
	background: linear-gradient(left, rgba(30,30,30,0) 0%,rgba(30,30,30,0.3) 20%,rgba(30,30,30,0.6) 53%,rgba(30,30,30,0.3) 79%,rgba(30,30,30,0) 100%); 
}
#frmregister label,
#frmlogin label{
	position: absolute;
	display: block;
	font-family: 'opensans_light';
	font-size: 14px;
	letter-spacing: -0.2px;
	margin-left: 35px;
	margin-bottom: 20px;
	font-weight: lighter;
	color: #282828;
	margin-top: -2px;
}
#frmlogin input[type="text"], #frmlogin input[type="password"]{
	margin-bottom: 5px!important;
	position: relative;
	width: 220px;
	height: 28px;
	padding-left: 28px;
	border-radius: 0.1em;
	margin-top: 18px;
	border: solid 1px rgba(0,0,0,0.4);
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.2);
	font-family: 'opensans_bold';
	font-size: 12px;
	color: #282828;
}

#frmregister input[type="text"], #frmregister input[type="password"], #frmregister input[type="email"]{
	position: relative;
	width: 220px;
	height: 28px;
	margin-bottom: 10px;
	padding-left: 28px;
	border-radius: 0.1em;
	margin-top: 18px;
	border: solid 1px rgba(0,0,0,0.5);
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.1);
	font-family: 'opensans_bold';
	font-size: 12px;
	color: #282828;
}
#frmregister input[type="file"]{
	margin-left: 150px;
	position: relative;	
	height: 90px;
	width: 90px;
	margin-bottom: 6px;
	border: solid 1px rgba(0,0,0,0.0);
	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.0);
	font-family: 'opensans_bold';
	font-size: 12px;
	color: #282828;	
	margin-top: 0px;
	padding: 0px!important;
	background: rgba(0,0,0,0.0);
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
#preview{
	background: transparent;
	background: rgba(0,0,0,0.0);
	border: solid 1px rgba(0,0,0,0.3);
	padding-top: 0px;
}
#txtusuario{
	background: url(images/user.png)left no-repeat, rgba(255,255,255,0.9);
}
#txtcontrasenia{
	background: url(images/pass.png)left no-repeat, rgba(255,255,255,0.9);
}
#txtusuario:focus{
	background: url(images/user_focus.png)left no-repeat, rgba(40,40,40,0.99);
	color: #FFF!important;
}
#txtcontrasenia:focus{
	background: url(images/pass_focus.png)left no-repeat, rgba(40,40,40,0.99);
	color: #FFF!important;
}
/****/
#txtusuario1{
	background: url(images/user_.png)left no-repeat, rgba(255,255,255,0.9);	
}
#txtusuario1:focus{
	background: url(images/user_.png)left no-repeat, rgba(40,40,40,0.99);
}
#txtcontrasenia1{
	background: url(images/pass_.png)left no-repeat, rgba(255,255,255,0.9);		
}
#txtcontrasenia1:focus{
	background: url(images/pass_.png)left no-repeat, rgba(40,40,40,0.99);	
}
#txtconf{
	background: url(images/pass_.png)left no-repeat, rgba(255,255,255,0.99);
}
#txtconf:focus{
	background: url(images/pass_.png)left no-repeat, rgba(40,40,40,0.99);
}
#txtcorreo{
	background: url(images/email.png)left no-repeat, rgba(255,255,255,0.99);
}
#txtcorreo:focus{
	background: url(images/email.png)left no-repeat, rgba(40,40,40,0.99);
}
#txtnombre, #txtapellidos{
	background: url(images/p_info.png)left no-repeat, rgba(255,255,255,0.99);
}
#txtnombre:focus, #txtapellidos:focus{
	background: url(images/p_info.png)left no-repeat, rgba(40,40,40,0.99);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus{
	background: rgba(40,40,40,0.99);
	color: #C7C7C7!important;
}
#txtusuario1:focus{

} 
p.footer{
	font-family: 'opensans_light';
	color: #EDEDED;
	font-size: 14px;
	border-top: 1px solid rgba(0,0,0,0.1);
	margin-top: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #1E613B;
	width: 100%;
	height: 20px;
}	
.footer a{
	text-decoration: none;
}
.footer .register{
	display: inline-block;
  	border: 2px solid #e5e9ec;
  	color: #b9bec2;
  	padding: 2px 8px;
  	border-radius: 15px;
  	font-weight: bold;
  	font-size: 12px;
	background: url(images/noise.png);
	margin-left: 10px;
}
.footer .register:hover{
	border: 2px solid rgba(255, 255, 255, 0.1);
  	background: url(images/noise.png), rgba(255, 255, 255, 0.8);
  	color: #000;
}
@-webkit-keyframes moveFromRight{
	from{
		-webkit-transform: scale(0.1) rotate(0deg);
	}to{
		-webkit-transform: scale(1) rotate(0deg) translateX(-12px);
	}
}
@-moz-keyframes moveFromRight{
	from{
		-moz-transform: scale(0.1) rotate(0deg);
	}to{
		-moz-transform: scale(1) rotate(0deg) translateX(-12px);
	}
}
@-o-keyframes moveFromRight{
	from{
		-o-transform: scale(0.1) rotate(0deg);
	}to{
		-o-transform: scale(1) rotate(0deg) translateX(-12px);
	}
}
@-ms-keyframes moveFromRight{
	from{
		-ms-transform: scale(0.1) rotate(0deg);
	}to{
		-ms-transform: scale(1) rotate(0deg) translateX(-12px);
	}
}
@keyframes moveFromRight{
	from{
		transform: scale(0.1) rotate(0deg);
	}to{
		transform: scale(1) rotate(0deg) translateX(-12px);
	}
}
@-webkit-keyframes fadeInLeft {
	0%{
		z-index: 19;
		opacity: 0;
		-webkit-transform: translateX(-100px);
	}
	100%{
		z-index: 20;
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0%{
		z-index: 19;
		opacity: 0;
		-moz-transform: translateX(-100px);
	}
	100%{
		z-index: 20;
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-ms-keyframes fadeInLeft {
	0%{
		z-index: 19;
		opacity: 0;
		-ms-transform: translateX(-100px);
	}
	100%{
		z-index: 20;
		opacity: 1;
		-ms-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0%{
		z-index: 19;
		opacity: 0;
		-o-transform: translateX(-100px);
	}
	100%{
		z-index: 20;
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0%{
		z-index: 19;
		opacity: 0;
		transform: translateX(-100px);
	}
	100%{
		z-index: 20;
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes fadeOutLeftBig {
	0%{
		z-index: 20;
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	100%{
		z-index: 19;
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
}

@-moz-keyframes fadeOutLeftBig {
	0%{
		z-index: 20;
		opacity: 1;
		-moz-transform: translateX(0);
	}
	100%{
		z-index: 19;
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}
}

@-ms-keyframes fadeOutLeftBig {
	0%{
		z-index: 20;
		opacity: 1;
		-ms-transform: translateX(0);
	}
	100%{
		z-index: 19;
		opacity: 0;
		-ms-transform: translateX(-2000px);
	}
}

@-o-keyframes fadeOutLeftBig {
	0%{
		z-index: 20;
		opacity: 1;
		-o-transform: translateX(0);
	}
	100%{
		z-index: 19;
		opacity: 0;
		-o-transform: translateX(-2000px);
	}
}

@keyframes fadeOutLeftBig {
	0%{
		z-index: 20;
		opacity: 1;
		transform: translateX(0);
	}
	100%{
		z-index: 19;
		opacity: 0;
		transform: translateX(-2000px);
	}
}
